import QRCode from 'qrcode'
export default {
  Store: {
    list: {
      query: {
        '@filter': `entity.getId() > 1`
      },
      list_filter: {
        name: {
          expression: `entity.getName() matches ":value"`,
          label: '门店名称',
          type: 'input'
        }
      },
      list_display: [
        { property: 'user', label: '登录账号' },
        { property: 'name', label: '门店名称' },
        {
          property: 'platformFeeRate',
          label: '平台手续费'
        },
        {
          property: 'image', label: '门店收款码',
          component: {
            props: ['record'],
            data() {
              return {
                show: false,
                loading: false,
                codeUrl: '',
                name: ''
              }
            },
            methods: {
              showCode(name) {
                console.log(123, name)
                this.codeUrl = ''
                this.name = name
                this.loading = true
                QRCode.toDataURL(`https://wechat.zhongshenglive.com/h5/pages/payment/deposit?store=${this.record.id}`)
                  .then((url) => {
                    console.log('QRCode', url)
                    this.codeUrl = url
                    this.show = true
                  })
                  .catch((err) => {
                    this.$message.error(err)
                    this.$router.go(-1)
                  })
                  .finally(() => { this.loading = false })
              }
            },
            render(h) {
              return <div>
                <el-button nativeOnClick={() => { this.showCode(this.record.name) }}
                  slot='reference' size='small' loading={this.loading}>
                  收款码
                </el-button>

                <el-dialog
                  title='门店收款码'
                  visible={this.show}
                  width='40%'
                  onClose={() => { this.show = false }}
                >
                  <div style='text-align: center; font-size:18px'>{this.name}</div>
                  <div style='padding: 10px; text-align: center'>
                    <el-image style='width: 400px; height: 400px' src={this.codeUrl} />
                  </div>
                  <div style='color:#909399;font-size:16px;'>您可以下载二维码之后进行相关物料的印刷</div>
                  <span slot='footer' class='dialog-footer'>
                    <a style='padding-right:20px;font-size:18px;color:blue' href={this.codeUrl} download={`${this.name}.png`}>点击下载</a>
                  </span>
                </el-dialog>
              </div>
            }
          }
        },
        {
          property: 'status',
          label: '状态',
          component: {
            props: ['data'],
            render(h) {
              return (
                <el-tag>{['停用', '正常'][parseInt(this.data)]}</el-tag>
              )
            }
          }
        }
      ]
    },
    form: {
      fields: [
        {
          property: 'user',
          field_options: { label: '登录账号' },
          default_value: 2
          // type_options: { disabled: true }
        },
        'name',
        'address',
        { property: 'period', field_options: { label: '营业时间' } },
        {
          property: 'autoOrderSettleType',
          field_options: { label: '分账结算方式' },
          required: true,
          default_value: 2,
          component: {
            props: ['form', 'property'],
            render(h) {
              return (
                <el-select v-model={this.form[this.property]} filterable>{
                  [
                    // { label: '手动结算', value: 0 },
                    // { label: '自动结算', value: 1 },
                    { label: '自动分账', value: 2 }
                  ]
                    .map(status => {
                      return <el-option key={status.value} label={status.label} value={status.value} />
                    })
                }</el-select>
              )
            }
          }
        },
        {
          property: 'platformFeeRate',
          field_options: { label: '平台手续费' },
          type: 'number',
          required: true,
          default_value: 0,
          help: '请填0-1之间的小数，如果是20%则填0.2，分账规则是客户扫门店付款码支付之后，系统先扣除平台手续费，再扣除支付费率，剩余的到门店账号，如费率设置0.2，支付费率是0.005，客户支付1000元之后，200元到平台账户，5元直接销毁，剩余的1000-200-5=795元到门店账户',
          component: {
            props: ['form', 'property'],
            render(h) {
              return (
                <el-input-number v-model={this.form[this.property]} min={0} max={0.994} step={0.001}></el-input-number>
              )
            }
          }
        },
        {
          property: 'status',
          required: true,
          default_value: '1',
          help: '停用状态的门店二维码会失效',
          component: {
            props: ['form', 'property'],
            render(h) {
              return (
                <el-select v-model={this.form[this.property]} filterable>{
                  [
                    { label: '正常', value: '1' },
                    { label: '停用', value: '0' }
                  ]
                    .map(status => {
                      return <el-option key={status.value} label={status.label} value={status.value} />
                    })
                }</el-select>
              )
            }
          }
        },
        {
          property: 'map',
          // Baidu Map Component Sample
          field_options: { label: '地图' },
          component: {
            data() {
              return {
                keyword: '',
                center: { lng: 113.09, lat: 22.62 },
                zoom: 17
              }
            },
            watch: {
              form: {
                handler: function (val) {
                  if (val.longitude && val.latitude) {
                    [this.center.lng, this.center.lat] =
                      this.tencentMapPointToBaiduMap(val.longitude, val.latitude)
                    this.mapCenterRefresh()
                  }
                },
                deep: true
              }
            },
            methods: {
              ready({ BMap, map }) {
                this.BMap = BMap
                this.map = map
                this.mapCenterRefresh()
              },
              click({ type, target, point, pixel, overlay }) {
                [this.form['longitude'], this.form['latitude']] =
                  this.baiduMapPointToTencentMap(point.lng, point.lat)
              },
              mapCenterRefresh() {
                this.map.centerAndZoom(new this.BMap.Point(this.center.lng, this.center.lat), this.zoom)
              },
              baiduMapPointToTencentMap(lng, lat) {
                if (lng == null || lng === '' || lat == null || lat === '') { return [lng, lat] }
                const x_pi = 3.14159265358979324
                const x = parseFloat(lng) - 0.0065
                const y = parseFloat(lat) - 0.006
                const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
                const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
                return [
                  (z * Math.cos(theta)).toFixed(7),
                  (z * Math.sin(theta)).toFixed(7)
                ]
              },
              tencentMapPointToBaiduMap(lng, lat) {
                if (lng == null || lng === '' || lat == null || lat === '') { return [lng, lat] }
                const x_pi = 3.14159265358979324
                const x = parseFloat(lng)
                const y = parseFloat(lat)
                const z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
                const theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi)
                return [
                  (z * Math.cos(theta) + 0.0065).toFixed(5),
                  (z * Math.sin(theta) + 0.006).toFixed(5)
                ]
              }
            },
            props: ['form', 'property'],
            render(h) {
              return (
                <baidu-map center={this.center} onReady={this.ready} onClick={this.click}
                  style={{ width: '100%', height: '400px', border: '1px solid #ddd', borderRadius: '5px' }}
                >
                  <bm-navigation anchor='BMAP_ANCHOR_TOP_RIGHT'></bm-navigation>
                  <bm-marker position={this.center} animation='BMAP_ANIMATION_BOUNCE'></bm-marker>
                  <bm-control offset={{ width: '10px', height: '10px' }}>
                    <bm-auto-complete v-model={this.keyword} sugStyle={{ zIndex: 1 }}>
                      <input placeholder='请输入搜索地名关键字'></input>
                    </bm-auto-complete>
                  </bm-control>
                  <bm-local-search keyword={this.keyword} auto-viewport={true} hidden={true}></bm-local-search>
                </baidu-map>
              )
            }
          }
        },
        { property: 'longitude' },
        { property: 'latitude' }
      ]
    }
  }
}

